<!-- 这是新闻资讯页面 -->
<template>
  <div id="news">
    <!-- 表单内容 -->
    <div class="search public">
      <myForm v-bind="formConfig" v-model:formData="formData">
        <template #header>
          <Title>
            <template #title>新闻资讯</template>
          </Title>
        </template>
        <template #footer>
          <div class="footer">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </div>
        </template>
      </myForm>
    </div>
    <!-- 表格信息 -->
    <div class="public table">
      <myTable
        :tableData="tableData"
        v-model:pageList="pageList"
        v-bind="tableConfig"
      >
        <template #header>
          <Title>
            <template #title> 新闻资讯数据表 </template>
            <template #right>
              <el-button type="success" @click="handleAdd">新增文章</el-button>
            </template>
          </Title>
        </template>
        <template #cover="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.cover"
            :preview-src-list="[scope.row.cover]"
            fit="cover"
        /></template>
        <template #time="scope">
          {{ formatDate(scope.row.time) }}
        </template>
        <template #updateTime="scope">
          {{ formatDate(scope.row.updateTime) }}
        </template>
        <template #isShow="scope">
          <el-switch
            v-model="scope.row.isShow"
            inline-prompt
            :active-icon="Check"
            :inactive-icon="Close"
            @click="handleChange(scope.row)"
          />
        </template>
        <template #operation="scope">
          <el-tooltip effect="dark" content="编辑文章" placement="top">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="hanldeRoutr(scope.row._id)"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="删除文章" placement="top">
            <el-button
              type="danger"
              :icon="Delete"
              circle
              @click="handleDelete(scope.row._id)"
            />
          </el-tooltip>
        </template>
        <template #author="scope">
          <template v-if="scope.row.author?.name">
            {{ scope.row.author?.name }}
          </template>
          <template v-else> 该用户已注销 </template>
        </template>
      </myTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import myForm from '@/base-ui/form'
import myTable from '@/base-ui/table'
import { Title } from '@/components/admin/public'

import { formConfig, tableConfig } from '@/views/admin/config/news.config'

import formatDate from '@/utils/dayjs'

import { Delete, Edit, Check, Close } from '@element-plus/icons-vue'

import useArticleList from '@/hooks/use-articleList'

const {
  formData,
  pageList,
  tableData,
  handleChange,
  hanldeRoutr,
  handleDelete,
  handleSearch,
  handleAdd
} = useArticleList(formConfig, 0)
</script>

<style scoped lang="less">
#news {
  .public {
    padding: 0px 20px 20px;
    background-color: #fff;
    border-radius: 16px;
    .footer {
      display: flex;
      justify-content: flex-end;
    }
  }
  .table {
    padding: 20px;
    margin-top: 20px;
  }
}
</style>
